import { createRouter, createWebHistory } from "vue-router";

// 静态导入需要用到的组件
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
import Detail from "./pages/Detail.vue";
import FilmList from "./pages/FilmList.vue";
import FilmInfo from "./pages/FilmInfo.vue";

// 创建路由器
const router = createRouter({
  // 设置路由模式，主要有如下两种模式，最大的不同之处就是 URL 地址的表现
  //    hash      : createWebHashHistory()
  //    history   : createWebHistory()
  history: createWebHistory(),

  // 设置路线，路由规则
  routes: [
    {
      name: "films",
      path: "/films",
      component: FilmList,
    },
    {
      name: "film",
      path: "/film/:id",
      component: FilmInfo,
    },
    {
      path: "/",
      component: Home,
    },
    {
      name: "home",
      path: "/home", // path
      component: Home, // 组件
    },
    {
      name: "about",
      path: "/about",
      component: About,
    },
    {
      // :id 与 :name 就是一个动态路由参数
      //    ? 表示该部分可选
      name: "detail",
      path: "/detail/:id?/:name?",
      component: Detail,
    },
  ],
});

// 导出路由器
export default router;
